﻿@charset "utf-8";
/* CSS Document */
@import url(base_f.css);

/*cloud*/

#mainBody {width:100%;height:100%;position:absolute;z-index:-1;}
.cloud {position:absolute;top:0px;left:0px;width:100%;height:100%;background:url(../images/fico/cloud.png) no-repeat;z-index:1;opacity:0.5;}
#cloud2 {z-index:2;}

/*login*/
.logintop{height:47px; position:absolute; top:0; background:url(../images/fico/loginbg1.png) repeat-x;z-index:100; width:100%;}
.logintop span{color:#fff; line-height:47px; background:url(../images/fico/loginsj.png) no-repeat 21px 18px; text-indent:44px; color:#afc5d2; float:left;}
.logintop ul{float:right; padding-right:30px;}
.logintop ul li{float:left; margin-left:20px; line-height:47px;}
.logintop ul li a{color:#afc5d2;}
.logintop ul li a:hover{color:#fff;}
.loginbody{background:url(../images/fico/loginbg3.png) no-repeat center center; width:100%; height:585px; overflow:hidden; position:absolute; top:47px;}
.systemlogo{background:url(../images/fico/loginlogo.png) no-repeat center;width:100%; height:71px; margin-top:75px;}
.loginbox{width:692px; height:336px; background:url(../images/fico/logininfo.png) no-repeat; margin-top:30px;}
.loginbox ul{margin-top:88px; margin-left:285px;}
.loginbox ul li{margin-bottom:25px;}
.loginbox ul li label{color:#687f92; padding-left:25px;}
.loginbox ul li label a{color:#687f92;}
.loginbox ul li label a:hover{color:#3d96c9;}
.loginbox ul li label input{margin-right:5px;}
.loginuser{width:299px; height:48px; background:url(../images/fico/loginuser.png) no-repeat; border:none; line-height:48px; padding-left:44px; font-size:14px; font-weight:bold;}
.loginpwd{width:299px; height:48px; background:url(../images/fico/loginpassword.png) no-repeat; border:none;line-height:48px; padding-left:44px; font-size:14px; color:#90a2bc;}
.loginbtn{width:111px;height:35px; background:url(../images/fico/buttonbg.png) repeat-x; font-size:14px; font-weight:bold; color:#fff;cursor:pointer; line-height:35px;}
.loginbm{height:50px; line-height:50px; text-align:center; background:url(../images/fico/loginbg2.png) repeat-x;position:absolute; bottom:0; width:100%; color:#0b3a58;}
.loginbm a{font-weight:bold;color:#0b3a58;}
.loginbm a:hover{color:#fff;}


/* 深蓝头部 */
.headerbox{background:url(../images/fico/topbg.gif) repeat-x; width: 100%; position:fixed; top:0; left:0; right:0; height: 70px; z-index: 10000;}
.headerbox .topleft{height:70px;background:url(../images/fico/topleft.jpg) no-repeat;  float: left; margin-right: 50px;}
.headerbox .topleft img{margin-top:12px;margin-left:10px;}
.headerbox .topright{height:70px;_background:url(../images/fico/topright.jpg) no-repeat right;}
.menu{}
.menu li{float:left;min-width:87px;height:70px; text-align:center;}
.menu li a{display:block;width:100%;height:70px;-moz-transition: none; transition: background-color 0.3s linear; -moz-transition: background-color 0.3s linear; -webkit-transition: background-color 0.3s linear; -o-transition: background-color 0.3s linear; }
.menu li a.selected{background:url(../images/fico/navbg.png) no-repeat bottom center; background-size: cover;}
.menu li a:hover{display:block;background:#000;color:#fff;background: none repeat scroll 0% 0% rgb(43, 127, 181);}
.menu div{ box-sizing: border-box; padding-top:10px;  }
.menu a p{font-size:12px;color:#d6e8f1; margin-top:2px;}
.menu li img{ width:32px; }
.menu.heng li{ min-width:180px; line-height: 70px; }
.menu.heng li div{padding-top: 0;}
.menu.heng li img{ margin-right: 5px; width: 48px; }
.menu.heng li p{ display: inline-block; font-size: 20px; font-weight: normal; }

.shutdown{ height: 70px;background:url(../images/fico/navbg.png) no-repeat; text-align: center; opacity: 0.9;}
.shutdown a{ padding-top:15px; display: block; color: #fff; padding:15px 15px 0; }
.shutdown i{ color: #fff; font-size:25px;}
.shutdown span{ margin-top: 3px; font-weight: normal; display: block; }
.shutdown:hover { opacity: 0.8}
.shutdown:active{ opacity: 0.7; }


/*半透明头部*/
.head_transparent{width: 100%; position:fixed; top:0; left:0; right:0; height: 70px; z-index: 10000; background: rgba(0,0,0,0.75);}
.head_transparent .topleft{height:70px; line-height: 70px; color: #fff; font-size:25px; float: left; margin-right: 50px; text-indent: 1em;}
.head_transparent .topleft i{ text-indent: 0; font-size: 35px; vertical-align: middle; }
.head_transparent .topleft img{margin-top:12px;margin-left:10px;}
.head_transparent .topright{height:70px;}

/*大屏头部*/
.dapingHead{ height: 30px; line-height: 30px; background:rgba(4,32,65,0.5); position:fixed; top:0; left:0; right: 0; z-index: 10000;  }
.dapingHead h2{ color: #fff; font-size: 15px; margin:0; line-height: 30px; text-align: center; }
.dapingHead .dp_headbg{ width: 28%;  position: absolute; top:0; height: 30px; line-height: 30px; text-align: center; background: #004ca6; color: #fff;}
.dapingHead .dp_headbg_left{ left: 0; }
.dapingHead .dp_headbg_right{ right: 0; }
.dapingHead .dp_headbg:before{ content: ''; width: 30px; height: 30px; position: absolute; top:0;}
.dapingHead .dp_headbg_left:before{ right: -30px; background: url(../images/dp_head_leftbg.png) no-repeat; }
.dapingHead .dp_headbg_right:before{ left:-30px; background: url(../images/dp_head_rightbg.png) no-repeat;}

/*大屏footer*/
.dapingFooter{ height: 48px; line-height: 48px; position: fixed; bottom: 0; left:0; right: 0; z-index: 10000; background:rgba(1,26,69,0.7); }
.foot-text{ text-align: center; color: #eee; }
.dp_footbg{ width: 24%; position: absolute; top:0; }
.dp_footbg_left{ left: 0; }
.dp_footbg_right{ right: 0; }
.dp_footbg ul{ width: 210px; padding: 1px 1px 0 1px;}
.dp_footbg ul li{ float:left; height: 21px; line-height: 20px; width: 50px; border:1px solid #eee; margin:1px; cursor: pointer;}
.dp_footbg ul li:hover,.dp_footbg ul li:active{ background:rgba(0,0,0,0.4);  }
.dp_footbg .dp_footBtn{ width: 133px; height: 44px; line-height: 40px; display: inline-block; margin:2px; font-size: 20px; box-sizing:border-box; cursor: pointer;}
.dp_footbg .dp_footBtn_pre{ background: url(../images/da_foot_leftbg.png) no-repeat; text-align: left; padding-left: 15px; }
.dp_footbg .dp_footBtn_next{ background: url(../images/da_foot_rightbg.png) no-repeat; text-align: right; padding-right: 15px; }

/*工具按钮*/
.btn_toolsbox { background: rgba(0, 0, 0, 0.5); border-radius: 3px; padding: 0 10px; overflow: hidden;  z-index: 10000;  }
.btn_tools { text-align: center; overflow: hidden; box-sizing: border-box; padding-top: 2px; }
.btn_tools li { box-sizing: border-box; width: 30px; height: 30px; float: left; text-align: center; display: inline-block; padding: 4px; border: 1px solid transparent; border-radius: 3px; }
.btn_tools li:hover { border: 1px solid #ccc; }
.btn_tools li a { display: block; height: 33px; }
.btn_tools li i { font-size: 18px; color: #fff; vertical-align: middle; cursor: pointer; }
.btn_tools.heng li{ float: none; display: block; }


/*大屏浮框列表*/
.dp_xuanfubox{min-width: 150px; background:rgba(0,0,0,0.5); position:fixed; bottom: 60px; right: 35px; z-index: 10000; border-radius: 5px; overflow: hidden; }
.dp_xuanfubox h2{ font-size: 20px; margin:0; height: 35px; line-height: 35px; padding-left:10px; font-size: 15px; color: #fff; position: relative; cursor: pointer;}
.dp_xuanfubox h2 i{ position: absolute; top:10px; right:15px; cursor: pointer;}
.dp_xuanfubox ul{  }
.dp_xuanfubox ul li{line-height: 30px; padding: 0; color:#fff; cursor: pointer;}
.dp_xuanfubox ul >li >p{ margin:0; height: 30px; padding:0 10px 0 10px; }
.dp_xuanfubox ul li p.redbg{background: #9d0301!important; border:0!important; }
.dp_xuanfubox ul li ol{ list-style: none; display: none;}
.dp_xuanfubox ul li ol li{ height: 25px; line-height: 25px; }
.dp_xuanfubox ol li p{ padding:0 0 0 30px;  }
.dp_xuanfubox ul li i{ width: 15px; }
.dp_xuanfubox ul li a{ color: #fff; }
.dp_xuanfubox ul li.on ol{ display: block; }
.ol-control{display:none}
/*图例*/
.tulibox{  width: 25px; height: 250px;  z-index: 10000; background: #fff; border-top-left-radius: 3px; }

/* 标题栏 */
.toolsTitle{ height: 35px; line-height: 35px;  position:absolute; top:70px; left:0; right: 0; background:#fff; opacity: 0.9;  }
.fuTitle{height: 35px; line-height: 35px;  position:absolute; top:70px; left:0; right: 0; background:#fff; opacity: 0.9;  }

/* 左侧浮框*/
.leftFloatbox{ width: 320px; background: rgba(0,0,0,0.5); position: fixed; top: 70px; left:0; bottom: 0; z-index: 1000; }
.doorbar{ position: absolute; top:40%; right:-13px; width:13px; height: 50px; text-align: center; line-height: 50px; background: rgba(0,0,0,0.5); z-index: 1000; border-top-right-radius: 2px; border-bottom-right-radius: 2px; color:rgba(255,255,255,0.8); cursor: pointer;}
.doorbar i{transform:rotate(0deg); -ms-transform:rotate(0deg);  -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg); transition: all .3s;}
.doorbar.on i{ transform:rotate(180deg); -ms-transform:rotate(180deg);  -moz-transform:rotate(180deg); -webkit-transform:rotate(180deg); -o-transform:rotate(180deg);}


/*地图栏目*/
.mapbox{ position: fixed; top:0px;left:0; right:0; bottom:0; z-index: 1; }
.daping_mapbox{position: fixed; top:0px;left:0; right:0; bottom:0; z-index: 1;}

/* 播放器*/
.BarControl { width: 100%; height: 100%; padding: 0; margin: 0; display: inline-block; }
.BarBeginTime { width: 40px; height: 20px; color: #fff; font-size: 8px; line-height: 20px; }
.TheBar { position: relative; width: calc(100% - 114px); margin-left: 2px; height: 4px; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; background: #EBE8E8; overflow: visible; }
.TheColorBar { width: 0px; border-radius: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px; height: 100%; background: #3498DB; float: left; }
.TimeBall { width: 10px; height: 10px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #3498DB; position: absolute; left: 0px; top: -3px; z-index: 2; cursor: pointer; }
.BarTimeBall { width: 10px; height: 10px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #3498DB; position: absolute; left: 0px; top: -3px; z-index: 2; cursor: pointer; }
.BarFinishTime { width: 40px; height: 20px; color: #fff; font-size: 8px; line-height: 20px; }
.BarBeginTime, .BarFinishTime, .TheBar { display: inline-block; vertical-align: middle; padding: 0px; }

.timeplaybox{ z-index: 10000; position:fixed;}
.timeplay{
    width: 100%;
    height:20px; 
    z-index: 10000;
}
.contral{
    width:30px;
    height:30px;
    line-height:30px;
    cursor:pointer;
    color:#fff;    
    text-align:center;    
    position: absolute;
    bottom: 18px;
    left:-5px;
    font-size: 18px;
    
}
.BarBeginTime{ position: absolute; bottom:23px; left:30px; }
.BarFinishTime{position: absolute; bottom:23px; right:10px; }
.TheBar{width: calc(100% - 20px); }



/* 播放器 */
#introNav{position:fixed;left:10px;right:200px;height:45px;overflow:hidden;margin:20px;z-index:9999; bottom: 0px;}
#introNav #playback li{float:left;}
#introNav #playback .pause{display:none;}
#introNav #playback a{display:block;width:20px;height:20px;float:left;margin:0 3px 0 0;text-indent:-9000px;outline:0;background-image:url(images/nav-icons.png);background-repeat:no-repeat;}
#introNav #playback .prev a{background-position:0 0;}
#introNav #playback .play a{background-position:0 -20px;}
#introNav #playback .pause a{background-position:0 -60px;}
#introNav #playback .next a{background-position:0 -40px;}
#introNav #playback a:hover{opacity:0.9;}
/* introNav timeline */
#timeline{width:100%;height:15px;position:absolute;top:25px;left:0;overflow:hidden;}
#timeline .active{width:0%;height:3px;position:relative;background-color: #FF0000;margin-top:-3px;opacity: 0.8;}
#timeline .inside{width:100%;height:3px;position:relative;background-color: #333333;opacity: 0.6;}
/* introNav nav */
#introNav ul.nav{width:100%;height:40px;position:absolute;top:30px;left:0;margin:0;}
#introNav .nav li{list-style:none;margin:0;position:absolute;top:0;left:0;text-align:center;padding:0;background:none;}
#introNav .nav li a{font-size:14px;color:#6E7577;outline:0;text-decoration:none;}
#introNav .nav li a:hover{color:#525758;}
#introNav .nav li.active a{color:#383C3D;}
#introNav .nav a .point{display:block; position:absolute;left:0;outline:0;cursor:pointer;width: 10px; height: 10px;top:-8px; background-color: #999999; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;opacity: 0.9;}
 


/*弹出层*/
.station-infowindow .info-header, .data-summary .info-header { height: 40px; line-height: 40px; border-bottom: solid 1px rgba(255, 255, 255, 0.4); }
.station-infowindow .info-header .station-name, .data-summary .info-header .station-name { font-size: 14px; float: left; display: inline-block; margin-left: 1.3em; }
.station-infowindow .info-header .up-datetime, .data-summary .info-header .up-datetime { display: inline-block; float: right; font-size: 12px; margin-right: 1em; }
.station-infowindow .info-body, .data-summary .info-body { margin: 1.2em; }
.station-infowindow .info-body > div, .data-summary .info-body > div { margin-bottom: 10px; }
.station-infowindow .info-body .row-header, .data-summary .info-body .row-header { font-size: 18px; line-height: 30px; margin-bottom: 0px; }
.station-infowindow .info-body .row-header .d-aqi, .data-summary .info-body .row-header .d-aqi { width: 33.333%; display: inline-block; }
.station-infowindow .info-body .row-header .d-pri-key, .data-summary .info-body .row-header .d-pri-key { display: inline-block; margin-left: 6px; }
.station-infowindow .info-body .row-header-data, .data-summary .info-body .row-header-data { font-size: 35px; line-height: 35px; }
.station-infowindow .info-body .row-header-data .d-aqi-value, .data-summary .info-body .row-header-data .d-aqi-value { display: inline-block; width: 33.333%; }
.station-infowindow .info-body .row-header-data .d-pri-value, .data-summary .info-body .row-header-data .d-pri-value { display: inline-block; }
.station-infowindow .info-body .row-header-data .d-pri-value span, .data-summary .info-body .row-header-data .d-pri-value span { margin-left: 5px; color: rgba(255, 255, 255, 0.7); font-size: 14px; }
.station-infowindow .info-body .row-data, .data-summary .info-body .row-data { font-size: 16px; }
.station-infowindow .info-body .row-data div, .data-summary .info-body .row-data div { display: inline-block;  line-height: 28px; }
.station-infowindow .info-body .row-data div span, .data-summary .info-body .row-data div span { margin-left: 5px; }
.station-infowindow .info-body .row-data .unit, .data-summary .info-body .row-data .unit { color: rgba(255, 255, 255, 0.7); font-size: 12px; margin-left: 3px; }
.station-infowindow .info-body .row-remark, .data-summary .info-body .row-remark { color: rgba(255, 255, 255, 0.7); margin-top: 10px; display: inline-block; width: 100%; margin-bottom: 0; }
.station-infowindow .info-body .row-weather, .data-summary .info-body .row-weather { margin-top: 10px; display: inline-block; width: 100%; }

.station-infowindow { color: white; width: 340px; }
.station-infowindow .info-header { background-color: rgba(0, 0, 0, 0.6); }
.station-infowindow .info-header .up-datetime { margin-right: 40px; }
.station-infowindow .info-header .info-btn-close { cursor: pointer; content: ''; position: absolute; right: 4px; width: 30px; height: 30px; top: 4px; background-image: url("http://cdn-static.fairsense.cn/aqmap/assets/images/btn_close.png"); background-position: 0; background-size: contain; }
.station-infowindow .info-body { background-color: rgba(0, 0, 0, 0.6); margin: 0; padding: 1.2em; }
.station-infowindow:after { border-left: 15px solid transparent; border-right: 15px solid transparent; border-top: 15px solid rgba(0, 0, 0, 0.5); content: ''; left: 155px; margin-left: 0px; position: absolute; bottom: -15px; }
.data-summary .info-header { border-bottom: none; }

.cesium-viewer-bottom{display:none}
 